<template>
    <div class="optioncity">
        <Row :gutter="8" type="flex">
            <Col v-for="item in dataing" :key="item.value">
                <Button :type="values == item.value?'primary':'default'" style="margin-top:5px" @click="checkoption(item.value)">{{item.label}}</Button>
            </Col>
        </Row>
    </div>
</template>

<script>
export default {
    props: {
        type: {
            type: [String],
            default: 'province'
        },
        value: {
            type: [Array,String],
            default: function () {
                return []
            }
        }
    
    },
    name: 'optioncity',
    data() {
        return {
            valuelist: [],
            values: '',
            datas: [],
        }
    },
    watch: {
        value(newVal,oldVal) {
            if (!newVal[0]) this.valuelist = []
            else if (!newVal[1]) this.valuelist = [newVal[0], '' ,'']
            else if (!newVal[2]) this.valuelist = [newVal[0], newVal[1] ,'']
            else this.valuelist = newVal
        },
    },
    computed: {
        dataing() {
            let data = []
            if (!this.value[0]) this.valuelist = []
            else if (!this.value[1]) this.valuelist = [this.value[0], '' ,'']
            else if (!this.value[2]) this.valuelist = [this.value[0], this.value[1] ,'']
            else this.valuelist = this.value
            if (this.type == 'province') {
                data = this.datas
                this.values = this.valuelist[0]
            } else if (this.type == 'city') {
                this.datas.forEach(province=>{
                    if (province.value == this.valuelist[0]) {
                        data = province.children
                    }
                })
                this.values = this.valuelist[1]
            } else if (this.type == 'county') {
                this.datas.forEach(province=>{
                    if (province.value == this.valuelist[0]) {
                        province.children.forEach(city=>{
                            if (city.value == this.valuelist[1]) {
                                data = city.children
                            }
                        })
                    }
                })
                this.values = this.valuelist[2]
            } else {
                data = []
                this.values = ''
            }
            return data
        }
    },
    mounted() {
        this.datas = this.storage.get('cityarray')
    },
    methods: {
        checkoption(value) {
            if (this.values != value) {
                this.values = value
                this.$emit('checkoption', value)
            } else {
                this.values = ''
                this.$emit('checkoption', '')
            }
        }
    },
}
</script>
<style lang="less" scoped>
.optioncity{
    width: 360px;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    &-con{
        min-width: 42px;
        // background: #f3f3f3;
        background: #fff;
        margin-top: 8px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
        color: rgba(43, 133, 228, 0.9);
        padding: 5px;
        border-radius: 5px;
    }
    &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    }
    &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #dcdee2;
    }
    &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #ededed;
    }
}
</style>